<template>
  <div class="home-wrap">
    <el-dialog :visible.sync="dialogVisible.show" center>
      <div class="showid">设备别名：{{ alias }}</div>
      <div class="showid">设备序列号：{{ device_sn }}</div>
      <el-form :inline="true" :model="ruleform" ref="form" :rules="rules">
        <div class="con">
          <el-form-item label="分配至主机" prop="host_sn">
            <el-select v-model="ruleform.host_sn" placeholder="请选择">
              <el-option
                v-for="item in hosts_arr"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="change('form')">分配</el-button>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
export default {
  name: "hostModify",
  props: {
    sn: {
      type: String,
      default: "",
    },
    device_sn: {
      type: String,
      default: "",
    },
    alias: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Object,
      default() {
        return {
          show: false,
        };
      },
    },
  },
  data() {
    return {
      hosts_arr: [],
      ruleform: {
        host_sn: "",
      },
      rules: {
        host_sn: [{ required: false, message: "", trigger: "blur" }],
      },
    };
  },
  watch: {
    sn: function(newVal, oldVal) {
      this.sn = newVal;
    },
    device_sn: function(newVal, oldVal) {
      this.device_sn = newVal;
    },
  },
  mounted() {
    this.initShow();
  },
  methods: {
    //获取主机列表下拉框,
    initShow() {
      postData("/adminweb/host/list", {
        host_type: 2,
        io_type: [0, 1],
        status: 1,
      })
        .then((res) => {
         // console.log(res);
          if (res.code == 0) {
            let hosts = res.datas.hosts;
            var hosts_arr = [];
            for (var i = 0; i < hosts.length; i++) {
              hosts_arr.push(hosts[i].sn);
            }
           // console.log(hosts_arr);
            this.hosts_arr = hosts_arr;
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          //this.$message.error(res.code + "，" + res.msg);
        });
    },
    //提交
    change(formName) {
      var that = this;
      var device_sn_arr = [];
      device_sn_arr.push(this.device_sn);
     // console.log(device_sn_arr);
      that.$refs[formName].validate((valid) => {
        if (valid) {
          postData("/adminweb/host/device/add", {
            sn: that.ruleform.host_sn,
            devices: device_sn_arr,
          })
            .then((res) => {
              if (res.code == 0) {
                that.$message.success("分配成功！");

                //刷新外部table的接口
                that.$emit("refreshList");
              } else {
                that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch((res) => {
              that.$message.error(res.code + "，" + res.msg);
            });
        } else {
          that.$message.error("分配失败");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
/* .home-wrap >>> .el-dialog--center .el-dialog__body {
  padding-bottom: 80px;
} */
.showid {
  height: 40px;
  line-height: 40px;
}
.con {
  margin-top: 30px;
}
.home-wrap>>> .el-dialog {
  width: 30%;
}
.home-wrap >>> .el-dialog--center .el-dialog__body{
    padding: 20px !important;
    height: 300px!important;
}
.home-wrap >>> .el-dialog{
    margin-top:30vh!important;
}
</style>
